<template>
  <div class="orderDetail">
    <div class="main">
      <div class="card">
        <div class="card-title">课程信息</div>
        <div class="info-list">
           <div class="info-item">
            <span class="label">校区名称</span>
            <span class="value">{{info ? info.deptName : '--'}}</span>
          </div>
           <div class="info-item">
            <span class="label">课程名称：</span>
            <span class="value">{{info ? info.courseName : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">班级名称</span>
            <span class="value">{{info ? info.className : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">学生名称</span>
            <span class="value">{{info ? info.studentName : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">开始时间：</span>
            <span class="value">{{info ? formatDate(info.startTime) : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">结束时间：</span>
            <span class="value">{{info ? formatDate(info.endTime) : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">购买课时：</span>
            <span class="value">{{info ? info.classTime : '--'}}</span>
          </div>
          <div class="info-item">
            <span class="label">剩余课时：</span>
            <span class="value">{{info ? info.classSurplusTime : '--'}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <!-- <div class="btn_wrap history-btn" @click="viewClassHistory">
        <span class="btn-icon">📚</span>
        <span>查看课时历史</span>
      </div> -->
      <div class="btn_wrap mainBgColor" @click="toDetail">
        <span class="btn-icon">📖</span>
        <span>查看课程信息</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
 data() {
     return {
         buyId: '',
         classId: '',
         info: null
     }
 },
 computed: {
    formatPrice() {
        return (val) => {
            return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
    }
 },
    created() {
      this.buyId = this.$route.params.id
      this.classId = this.$route.params.classId
    },
    beforeRouteEnter(to, from, next) {
        console.log(from, 'from')
      if (from.path === '/assets') {
        to.meta.isBack = false;
      } else {
        to.meta.isBack = true;
      }
      next()
    },
    activated() {
      if (!this.$route.meta.isBack) {
          this.buyId = this.$route.params.id
          this.classId = this.$route.params.classId
          this.getData()
      }
    },
    methods: {
        getData() {
            this.$http.getOrderDetail({
                buyId: this.buyId,
                classId: this.classId
            }).then(res => {
                this.info = res.data.result
            })
        },
        toDetail() {
            console.log(this.info)
            if (this.info && this.info.id) {
                this.$router.push({name: 'common-product-detail', params: {id: this.info.id}})
            }
        },
        viewClassHistory() {
            if (this.info && this.info.buyId) {
                this.$router.push({name: 'class-history', params: {buyId: this.info.buyId}})
            }
        },
        formatDate(dateString) {
            if (!dateString) return '--'
            try {
                const date = new Date(dateString)
                if (isNaN(date.getTime())) return '--'
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                })
            } catch (error) {
                return '--'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.orderDetail {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  .header {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;

    .header-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
      text-align: center;
    }
  }

  .main {
    flex: 1;
    padding: 15px;

    .card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;

      .card-title {
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
        background: #f8f9fa;
        color: #495057;
      }

      .info-list {
        padding: 0 20px;

        .info-item {
          display: flex;
          align-items: flex-start;
          padding: 16px 0;
          border-bottom: 1px solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }

          .label {
            width: 90px;
            font-size: 14px;
            color: #666;
            flex-shrink: 0;
            line-height: 1.4;
          }

          .value {
            flex: 1;
            font-size: 14px;
            color: #333;
            line-height: 1.4;
            word-break: break-all;
          }
        }
      }
    }
  }

  .action-buttons {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;

    .btn_wrap {
      flex: 1;
      height: 50px;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      .btn-icon {
        margin-right: 8px;
        font-size: 18px;
      }

      &.history-btn {
        background: #f8f9fa;
        color: #666;
        border: 1px solid #e9ecef;

        &:active {
          background: #e9ecef;
        }
      }

      &.mainBgColor {
        background: #007bff;
        color: #fff;
        border: none;

        &:active {
          background: #0056b3;
        }
      }
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .orderDetail {
    .header {
      padding: 12px 15px;

      .header-title {
        font-size: 16px;
      }
    }

    .main {
      padding: 10px;

      .card {
        border-radius: 8px;

        .card-title {
          padding: 14px 16px;
          font-size: 15px;
        }

        .info-list {
          padding: 0 16px;

          .info-item {
            padding: 14px 0;

            .label {
              width: 80px;
              font-size: 13px;
            }

            .value {
              font-size: 13px;
            }
          }
        }
      }
    }

    .action-buttons {
      padding: 12px 15px;

      .btn_wrap {
        height: 46px;
        font-size: 15px;
        border-radius: 23px;

        .btn-icon {
          font-size: 16px;
        }
      }
    }
  }
}

/* 小屏幕手机适配 */
@media (max-width: 375px) {
  .orderDetail {
    .main {
      .card {
        .info-list {
          .info-item {
            .label {
              width: 70px;
              font-size: 12px;
            }

            .value {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
